<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/index.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <link href="../index.css" rel="stylesheet"/>
    <title>产品管理</title>
</head>
<body>
<div id="app">
    <div></div>
    <div>
        <div class="title">基于WebGIS的湖北省扶贫产业空间分布信息系统</div>
        <el-card class="box-card">
            <div slot="header" style="position:relative;">
                <el-page-header @back="()=>{location.href = 'index.html'}" content="全部产品"></el-page-header>
                <el-button style="position:absolute;top: -5px;right: 0;" type="text" @click="add">新增</el-button>
            </div>
            <el-table
                    :data="items"
                    style="width: 100%">
                <el-table-column
                        type="index"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称">
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="所属类型">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="update(scope.row)">修改</el-button>
                        <el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    layout="prev, pager, next"
                    :current-page.sync="page"
                    :page-size="size"
                    :total="total" @current-change="pageChange">
            </el-pagination>
        </el-card>
        <el-dialog
                :title="type ? '修改镇' : '新建镇'"
                :visible.sync="dialog"
                width="30%">
            <el-form ref="form" :model="item" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
                <el-form-item label="所属类型">
                    <el-select
                            v-model="item.typeId"
                            filterable
                            remote
                            reserve-keyword
                            :remote-method="search"
                            :loading="loading"
                            style="width: 100%">
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</div>
</body>
<script>
    const api = '../api/'
    const model = 'industryInfo'
    const url = api + model;
    const vue = new Vue({
        el: '#app',
        data: {
            items: [],
            page: 1,
            size: 9,
            total: 0,
            options: [],
            loading: false,
            dialog: false,
            type: false,
            item: {
                name: '',
                typeId: '',
            }
        },
        created() {
            this.getItem();
        },
        methods: {
            pageChange(){
                this.getItem();
            },
            getItem(){
                axios({
                    url: url,
                    method: 'GET',
                    params: {
                        page: this.page,
                        size: this.size
                    }
                }).then(result=>{
                    if (result.data.success) {
                        this.items = result.data.data.items;
                        this.total = result.data.data.total;
                    } else {
                        this.$message.error('获取数据出错');
                    }
                })
            },
            remove(id){
                this.$confirm('此操作将永久删除该项, 是否继续?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        url: `${url}/${id}`,
                        method: 'DELETE',
                    }).then(result=>{
                        if(result.data.success){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getItem();
                        }else{
                            this.$message.error('删除错误' + result.data.message ? '，' + result.data.message : '');
                        }
                    })
                });
            },
            search(value){
                this.loading = true;
                if(value == ''){
                    this.loading = false;
                    this.options = [];
                    return;
                }
                axios({
                    url: `${api}industryType`,
                    method: 'GET',
                    params: {
                        page: 1,
                        size: 9,
                        value: value
                    }
                }).then(result=>{
                    this.loading = false;
                    if(result.data.success){
                        this.options = result.data.data.items;
                    }else{
                        this.$message.error('查询县错误')
                    }
                })
            },
            add(){
                this.type = false;
                this.dialog = true;
                this.item = {
                    name: '',
                    typeId: '',
                }
                this.options = [];
            },
            update(item){
                this.type = true;
                this.dialog = true;
                this.item = item;
                this.options = [{
                    id: item.typeId,
                    name: item.typeName
                }]
            },
            submit(){
                this.dialog = false;
                if(this.type){
                    axios({
                        url: `${url}/${this.item.id}`,
                        method: 'PUT',
                        data: this.item
                    }).then(result=>{
                        if (result.data.success) {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.getItem();
                        } else {
                            this.$message.error('修改错误' + result.data.message ? '，' + result.data.message : '');
                        }
                    })
                }else{
                    axios({
                        url: url,
                        method: 'POST',
                        data: this.item
                    }).then(result=>{
                        if (result.data.success) {
                            this.$message({
                                type: 'success',
                                message: '新建成功!'
                            });
                            this.getItem();
                        } else {
                            this.$message.error('新建错误' + result.data.message ? '，' + result.data.message : '');
                        }
                    })
                }
            }
        }
    })
</script>
</html>